<template>
	<view class="footer clear-float">
		<text @click="createRecord" class="pull-left" v-if="from === 'main'">
			<uni-icons type="plus" size="26" color="#fff"></uni-icons>
			<text class="icon-text">创建记录</text>
		</text>
		<text @click="startRecord" v-if="from === 'create'">
			<uni-icons type="compose" size="26" color="#fff"></uni-icons>
			<text class="icon-text">开始记录</text>
		</text>

		<template v-if="from === 'bird'">
			<text @click="editInfo" class="pull-left">
				<text class="icon-text">修改基本信息</text>
			</text>
			<view @click="addBird" class="inline-block">
				<uni-icons custom-prefix="iconfont" type="icon-add-bold" size="20" color="#fff" />
				<text class="icon-text">添加鸟种</text>
			</view>
			<text @click="save" class="pull-right">保存</text>
		</template>
		<template v-else>
			<text @click="myRecord" class="pull-right">我的记录</text>
		</template>
	</view>
</template>

</view>
</template>
<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue"
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MescrollBody
		},
		data() {
			return {
				
			}
		},
		props: {
			from: String
		},
		methods: {
			createRecord() {
				uni.navigateTo({
					url: '/pages/create-record/index'
				})
			},
			myRecord() {
				uni.navigateTo({
					url: '/pages/my-record/index'
				})
			},
			startRecord() {
				this.$emit('create')
			},
			editInfo() {
				uni.navigateBack({
					delta: 1
				})
			},
			addBird() {
				uni.navigateTo({
					url: '/pages/create-record/birdType'
				})
			},
			save() {
				this.$emit('save')
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = (res.windowHeight - 100) + 'px'
				}
			})
		},
	}
</script>
<style lang="scss">
	.footer {
		position: fixed;
		left: var(--window-left);
		right: var(--window-right);
		// z-index: 1;
		box-sizing: border-box;
		bottom: 0;
		height: 80rpx;
		line-height: 80rpx;
		background-color: $uni-bg-color;
		color: #fff;
		padding: 0 20rpx;
		text-align: center;

		.uni-icons {
			vertical-align: bottom;
		}
	}
</style>
